<template>
  <!-- 选择地区 -->
  <div class="conditions">
    <span class="title">地区</span>
    <Cascader
      :data="options"
      filterable 
      placeholder="请输入关键词搜索"
      clearable
      change-on-select
      v-model="checkedList"
      :placeholder="placeholder"
      style="dispaly:inline-block;width:200px;"
    ></Cascader>
    <!-- <div>
      <i-select v-model="province" style="width:100px" :placeholder="options[provinceIndex].label">
        <i-option v-for="item in options" :key="item.label" :value="item.value">{{ item.label }}</i-option>
      </i-select>

      <i-select
        v-model="city"
        ref="city"
        style="width:100px"
        :placeholder="'children' in options[provinceIndex]?options[provinceIndex].children[cityIndex].label:''"
      >
        <i-option
          v-for="item in options[provinceIndex].children"
          :key="item.label"
          :value="item.value"
        >{{ item.label }}</i-option>
      </i-select>

      <i-select
        v-model="county"
        ref="county"
        style="width:100px"
        clearable="true"
        :placeholder="'children' in options[provinceIndex].children[cityIndex]?options[provinceIndex].children[cityIndex].children[0].label:''"
      >
        <i-option
          v-for="item in options[provinceIndex].children[cityIndex].children"
          :key="item.label"
          :value="item.value"
        >{{ item.label }}</i-option>
      </i-select>
    </div>-->
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      default: () => []
    },
    placeholder: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      province: null,
      city: null,
      county: null,
      provinceIndex: 0,
      cityIndex: 0,
      countyIndex: 0,
      data: [
        {
          value: "beijing",
          label: "北京",
          children: [
            {
              value: "gugong",
              label: "故宫"
            },
            {
              value: "tiantan",
              label: "天坛"
            },
            {
              value: "wangfujing",
              label: "王府井"
            }
          ]
        },
        {
          value: "jiangsu",
          label: "江苏",
          children: [
            {
              value: "nanjing",
              label: "南京",
              children: [
                {
                  value: "fuzimiao",
                  label: "夫子庙"
                }
              ]
            },
            {
              value: "suzhou",
              label: "苏州",
              children: [
                {
                  value: "zhuozhengyuan",
                  label: "拙政园"
                },
                {
                  value: "shizilin",
                  label: "狮子林"
                }
              ]
            }
          ]
        }
      ],
      // options: [
      //   {
      //     label: "湖南",
      //     value: "1",
      //     children: [
      //       {
      //         label: "长沙",
      //         value: "1",
      //         children: [
      //           {
      //             label: "天心",
      //             value: "1"
      //           },
      //           {
      //             label: "岳麓",
      //             value: "2"
      //           }
      //         ]
      //       },
      //       {
      //         label: "衡阳",
      //         value: "2",
      //         children: [
      //           {
      //             label: "衡东",
      //             value: "1"
      //           },
      //           {
      //             label: "衡阳",
      //             value: "2"
      //           }
      //         ]
      //       }
      //     ]
      //   },
      //   {
      //     label: "云南",
      //     value: "2",
      //     children: [
      //       {
      //         label: "昆明",
      //         value: "1",
      //         children: [
      //           {
      //             label: "五华",
      //             value: "1"
      //           }
      //         ]
      //       },
      //       {
      //         label: "大理",
      //         value: "2"
      //       },
      //       {
      //         label: "丽江",
      //         value: "3"
      //       }
      //     ]
      //   }
      // ],
      checkedList: []
    };
  },
  computed: {},
  watch: {
    checkedList(val) {
      this.$emit("input", val);
    },
    province(val) {
      let provinceIndex = this.options.findIndex(function(data) {
        return data.value == val;
      });
      this.provinceIndex = provinceIndex;
      if (!("children" in this.options[this.provinceIndex])) {
        this.$refs.city.clearSingleSelect();
      }
    },
    city(val) {
      let cityIndex = this.options[this.provinceIndex].children.findIndex(
        function(data) {
          return data.value == val;
        }
      );
      this.cityIndex = cityIndex;
      if (
        !(
          "children" in
          this.options[this.provinceIndex].children[this.cityIndex]
        )
      ) {
        this.$refs.county.clearSingleSelect();
      }
    },
    county(val) {
      console.log(val);
    }
  },
  methods: {},
  created() {},
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scope>
.ivu-cascader {
  display: inline-block;
}
</style>
